<template>
    <div>
        <div class="content" style="width: 100%;">
            <el-table
			v-model="tableData"
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="设备名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="ip"
                    label="ip地址">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="设备状态">
                </el-table-column>
                <el-table-column
                    prop="option"
                    label="设备连接"
                    width="300">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="change($event,scope.row,scope.$index)"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="commucation"
                    label="设备通信">
                    <template scope="scope">
                        <div>
                            <el-button type="text" @click="change1($event,scope.row,scope.$index)">点击与该设备进行通信</el-button>
                            <el-dialog title="发送信息" :visible.sync="dialogVisible" >
                                <el-form :model="form">
                                    <el-form-item label="通信输入框" :label-width="formLabelWidth">
                                        <el-input v-model="form.name" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="communicate($event,scope.row,scope.$index)">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <dialog></dialog>
        </div>
    </div>
</template>

<script>
import { fetchUserData } from '@/api'


export default {
    name: 'home',
    components: {},
    data() {
        return {
            name: 'helloworld',
            dialogVisible: false,
            c: 1,
            tableData: [{
                date: '未连接',
                name: '设备1',
                ip: '192.168.1.6',
                value: false,
            }, {
                date: '未连接',
                name: '设备2',
                ip: '192.168.1.2',
                value: true,
            }, {
                date: '未连接',
                name: '设备3',
                ip: '192.168.1.3',
                value: true,
            }, {
                date: '未连接',
                name: '设备4',
                ip: '192.168.1.4',
                value: true,
            }, {
                date: '未连接',
                name: '设备5',
                ip: '192.168.1.4',
                value: true,
            }],
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            formLabelWidth: '120px',
        }
    },
    methods: {
        getUserData() {
            fetchUserData().then(res => {
                this.userInfo = JSON.stringify(res, null, 4)
            })
        },
        change1(e, row, index) {
            if (row.date === '未连接') {
                this.$message({
                    message: '该设备尚未连接,无法进行通信!',
                    center: true,
                    type: 'error',
                })
            } else {
                this.dialogVisible = true
            }
        },
        communicate(e, row, index) {
            // eslint-disable-next-line no-sequences,no-unused-expressions
            this.dialogVisible = false,
            this.$message({
                message: '消息发送成功!已断开连接',
                center: true,
                type: 'success',
            })
            // eslint-disable-next-line no-unused-expressions,no-sequences
            row.status = 0,
            row.date = '未连接',
            console.log(row)
        },
        handleCommand(command) {
            this.$message('click on item ' + command)
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row'
            } if (rowIndex === 3) {
                return 'success-row'
            }
            return ''
        },
        change(e, row, index) {
            if (row.status) {
                // eslint-disable-next-line no-unused-expressions
                this.$message({
                    message: '设备已连接。',
                    type: 'success',
                    // eslint-disable-next-line no-sequences
                }),
                row.date = '已连接'
            } else {
                this.$message({
                    message: '设备已中断。',
                    type: 'error',
                })
                row.date = '未连接'
            }
        },
        open() {
            this.dialogVisible = true
        },
        close() {
            this.dialogVisible = false
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}
.home-content {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
